<template>
  <div>
    <el-form ref="elForm" :model="formData"  size="medium" label-width="500px">
      <el-form-item label="车次名称" prop="field101">
        <span v-html="this.data"></span>
      </el-form-item>
      <el-form-item label="火车名称" prop="field102">
        <span v-html="this.data1"></span>
      </el-form-item>
      <el-form-item label="图片" prop="field103">
        <img :src="this.data2">
      </el-form-item>
      <el-form-item label="发车日期" prop="field104">
        <span v-html="this.data3"></span>
      </el-form-item>
      <el-form-item label="起始站" prop="field105">
        <span v-html="this.data4"></span>
      </el-form-item>
      <el-form-item label="终点站" prop="field106">
        <span v-html="this.data5"></span>
      </el-form-item>
      <el-form-item label="发车时间" prop="field107">
        <span v-html="this.data6"></span>
      </el-form-item>
      <el-form-item label="到站时间" prop="field108">
        <span v-html="this.data7"></span>
      </el-form-item>
      <el-form-item label="总时长" prop="field108">
        <span v-html="this.data8"></span>
      </el-form-item>
<!--      <el-form-item label="到站时间" prop="field108">-->
<!--        <span v-html="this.data"></span>-->
<!--      </el-form-item>-->
      <el-form-item  v-for="(val, key) in data9" :key="key"  label="座位类型" prop="field108">
        <span v-html="val.ticketType"></span>
        <el-form-item label="票价" prop="field108">
          <span v-html="val.ticketPrice"></span>
        </el-form-item>
        <el-form-item label="剩余个数" prop="field108">
          <span v-html="val.numberOfTickets"></span>
        </el-form-item>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="handleAdd">购票</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车次名称" prop="trainNumberName" >
          <el-input v-model="form.trainNumberName" placeholder="请输入车次名称"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="乘客姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入乘客姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="车票类型" prop="ticketType">
          <el-select v-model="form.ticketType" placeholder="请选择车票类型">
            <el-option
              v-for="dict in dict.type.train_seat"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="订单日期" prop="ticketPurchaseDate">-->
<!--          <el-date-picker clearable size="small"-->
<!--                          v-model="form.ticketPurchaseDate"-->
<!--                          type="date"-->
<!--                          value-format="yyyy-MM-dd"-->
<!--                          placeholder="选择订单日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="open1" width="500px" append-to-body>
      <div v-html="this.data12" v-model="form.paymentAmount"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">支付</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getInformation} from "@/api/system/information";
  import { addOrder} from "@/api/system/order";
  import {listPrice} from "@/api/system/price"
  export default {
    dicts: ['train_seat'],
    components: {},
    props: [],
    data() {
      return {
        //trainNumberName:10000,
        // 表单参数
        form: {
          trainNumberName:null,
          //idNumber:123,
        },
        title: "",
        // 是否显示弹出层
        open1:false,
        open: false,
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field104: undefined,
          field105: undefined,
          field106: undefined,
          field107: undefined,
          field108: undefined,
        },
        data:null,
        data1:null,
        data2:null,
        data3:null,
        data4:null,
        data5:null,
        data6:null,
        data7:null,
        data8:null,
        data9:null,
        data10:null,
        data11:null,
        data12:null,
        tid:null,

        // 表单校验
        rules: {
        },
        // 表单重置
        reset() {
          this.form = {
            did: null,
            tid: null,
            trainNumberName: null,
            userName: null,
            idNumber: null,
            name: null,
            phone: null,
            ticketType: null,
            paymentAmount: null,
            ticketPurchaseDate: null,
            state: null,
            auditState: null,
            remarks: null,
            remarks1: null
          };
          this.resetForm("form");
        },
       /* rules: {
          field101: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field102: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field103: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field104: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field105: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field106: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field107: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field108: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
        },*/
      }
    },
    computed: {},
    watch: {

    },
    created() {
     // this.form.trainNumberName = 548774444;
      this.tid=this.$route.query.tid;
      this.getInformation1();
    },
    mounted() {

    },
    methods: {
      submitForm1() {
        listPrice(this.form).then(res => {
          this.data12=res.rows[0].ticketPrice
          console.log(this.data12)
        }),
        this.open=false;
        this.open1 = true;
        this.title = "需要支付金额";
        // this.$router.push({path:"/home/Ticket/index"});
        // this.form.tid=this.tid
        // addOrder(this.form).then(res=>{
        //   this.$modal.msgSuccess("新增成功");
        //   this.open = false;
        //   this.getInformation1();
        // })
      },
      submitForm() {
        // this.$router.push({path:"/home/Ticket/index"});
       this.form.paymentAmount=this.data12
        this.form.tid=this.tid
        addOrder(this.form).then(res=>{
          this.$modal.msgSuccess("支付成功");
          this.open1 = false;
          this.getInformation1();
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      getInformation1() {
        getInformation(this.tid).then(res => {
          console.log(res);
         this.data = res.data.trainNumberName;
         //console.log(this.form.trainNumberName)
          //this.$set(this.form, "trainNumberName", res.data.trainNumberName)
          this.data1 = res.data.licensePlateNumber;
          this.data2 = res.data.picture;
          this.data3 = res.data.departureDate;
          this.data4 = res.data.startingStation;
          this.data5 = res.data.terminus;
          this.data6 = res.data.departureTime;
          this.data7 = res.data.arrivalTime;
          this.data8 = res.data.totalDuration;
          this.data9 = res.data.ticketPriceList;
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.trainNumberName=this.data
        this.open = true;
        this.title = "填写购票信息";
      },
    }
  }

</script>
<style>
</style>
